import { ToolBar } from "@cscec/udp-mobile-ui/es/baseComponent/toolBar/base";

export const HeaderToolbar = ({title}:any) => {

  return (
    <div
        style={{ 
        top: 0, left: 0, right: 0,
        zIndex: 1000,
        //background: 'linear-gradient(to bottom, rgb(149 211 247), rgb(239 247 254))',
        backgroundColor:'#c1e1f8',
        borderBottom: '1px solid #e5e5e5',
        lineHeight: '96px',
        position: 'relative',
        textAlign: 'center',
        height: '96px',
        fontSize:'1.3rem',
        //fontSize: '18px',
        //fontWeight: 'bold',
        color: '#333'
        }}
    >
      <ToolBar buttons={[ 
        { id: 'back',
          text: '', 
          size:'middle',
          style:{backgroundColor:"white",color:'#1eb7d8',borderRadius:'50%',marginLeft:'15px'},
        },
        ]}
        style={{
          position: 'absolute',
          left: 0,
          top:'50%',
          transform: 'translateY(-50%)',
        }}
         />
        <div style={{
          display:'inline-block',
          color:'#1eb7d8',
          width:'65%',
          textAlign:'left'
        }}>{title?title:"教材学习"}</div>
    </div>
  );
};